import React, {Component} from 'react';
import {Layout, Menu} from "antd";
import { Link, withRouter, RouteComponentProps,matchPath } from "react-router-dom";
import router, {IRouter} from "../../router";
import Logo from '../Logo'
const { Sider } = Layout;
const { SubMenu } = Menu;

interface IProps extends RouteComponentProps{
    collapsed:boolean
}

interface IState {
    defaultSelectedKeys: string[],
    defaultOpenKeys: string[]
}

class leftNav  extends Component<IProps,IState> {

    constructor(props:IProps) {
        super(props);
        this.state = {
            defaultOpenKeys: [],
            defaultSelectedKeys: []
        }
    }

    heightMenu = (leftRouter: IRouter[]) => {
        const path = this.props.location.pathname;
        console.log(path);
        for(let r of leftRouter) {
            const match = matchPath(path, {path: r.path})
            if(match) {
                if(match.isExact){
                    this.setState({
                        defaultSelectedKeys: [r.key]
                    })
                }else {
                    this.setState({
                        defaultOpenKeys: [r.key]
                    })
                }
            }
            if(r.children) {
                this.heightMenu(r.children);
            }
        }
    }

    /**
     * 动态生成菜单
     **/
    private generateMenu = (routerList?: IRouter[]) => {
        return (
            <>
                {
                    routerList?.map(r=>{
                        if(r.children) {
                            return(
                                <SubMenu key={ r.key} icon={r.icon} title={r.title}>
                                    {this.generateMenu(r.children)}
                                </SubMenu>
                            )
                        }
                        return (
                                <Menu.Item key={r.key} icon={r.icon}>
                                    <Link to ={ r.path }>{r.title}</Link>
                                </Menu.Item>
                        )
                    })
            }
            </>
        )
    }

    componentDidMount(): void {
        this.heightMenu(router);
    }

    public render() {

        return (
            <>
                <Sider trigger={null} collapsible collapsed={this.props.collapsed}>
                    {/* 1. logo的样式 */}
                    <Logo collapsed={this.props.collapsed}/>
                    {/*2. 菜单导航(antd内部的一个判断机制) */}
                    {
                        this.state.defaultSelectedKeys.length > 0 ?
                            <Menu theme="dark" mode="inline"
                                  defaultSelectedKeys={this.state.defaultSelectedKeys}
                                  defaultOpenKeys = {this.state.defaultOpenKeys}
                            >
                                { this.generateMenu(router) }
                            </Menu>: null
                    }
                </Sider>
            </>
        );
    }
}

export default withRouter(leftNav) ;
